<style lang="scss" scoped>

.root {
	min-height: 100vh;
	background-color: #FBF8FB;
}

.top {
	background-repeat: no-repeat;
	background-size: cover;
	background-image: $background-image-user-index-equity-top-bg;
}

.top-content {
	margin: 38rpx 30rpx 0 30rpx;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 42rpx 0 30rpx 0;
}

.top-content-userinfo {
	display: flex;
	padding-left: 46rpx;
	padding-right: 34rpx;
}

.top-content-avatar {
	$width: 104rpx;
	width: $width;
	height: $width;
	background-color: #FFF;
	border-radius: $width;
	display: block;
}

.top-content-center {
	width: calc(100% - 329rpx);
	margin-left: 20rpx;
	margin-right: 20rpx;
	color: #FFF;
}

.top-content-nickname {
	$height: 43rpx;
	height: $height;
	line-height: $height;
	font-size: 36rpx;
	font-weight: bold;
	margin-top: 2rpx;
}

.top-content-record {
	$height: 26rpx;
	height: $height;
	line-height: $height;
	font-size: 28rpx;
	margin-top: 10rpx;
}

.top-content-icon {
	display: flex;
}

.top-content-icon-item {
	$width: 53rpx;
	width: $width;
	height: $width;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: $width;
	margin-left: 13rpx;
}

.top-content-button {
	margin-top: 69rpx;
	display: flex;
	justify-content: flex-end;
}

.top-face, .top-renew {
	width: 218rpx;
	height: 61rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 31rpx;
	font-size: 28rpx;
}

.top-face {
	border: 2rpx solid#F8DB86;
	color:#F8DB86;
}

.top-face-icon {
	$width: 37rpx;
	width: $width;
	height: $width;
	margin-right: 10rpx;
}

.top-renew {
	background:#F8DB86;
	color: #766534;
	margin: 0 28rpx 0 35rpx;
}

.card {
	margin: 18rpx 30rpx 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
}

.card-item {
	width: calc(50% - 11rpx);
	align-items: center;
	display: flex;
	border: 1rpx solid rgba(229,229,229,1);
	border-radius: 10rpx;
	padding: 30rpx 22rpx 30rpx 30rpx;
	background-color: #FFF;
	box-sizing: border-box;
}

.card-item-left {
	width: calc(100% - 24rpx);
}

.card-item-left view {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card-item-title {
	$height: 32rpx;
	height: $height;
	line-height: $height;
	font-size: $height;
	font-weight: bold;
}

.card-item-desc {
	$height: 24rpx;
	height: $height;
	line-height: $height;
	font-size: $height;
	color: #E5E5E5;
	margin-top: 20rpx;
}

.card-item-arrow {
	width: 40rpx;
}

.cell {
	height: 102rpx;
	display: flex;
	align-items: center;
	background-color: #FFF;
	position: relative;
}

.cell::after {
	position: absolute;
	box-sizing: border-box;
	content: ' ';
	right: 0;
	bottom: 0;
	left: 102rpx;
	border-bottom: 2rpx solid #F9F9FB;
}

.cell-icon {
	width: 102rpx;
	padding-right: 24rpx;
	display: flex;
	justify-content: flex-end;
	box-sizing: border-box;
}

.cell-value {
	width: calc(100% - 182rpx);
	$height: 31rpx;
	height: $height;
	line-height: $height;
}

.cell-arrow {
	width: 50rpx;
	display: flex;
	justify-content: flex-end;
}

.treaty {
	display: flex;
	background-color: #FFF;
	align-items: center;
	margin-top: 18rpx;
}

.treaty-item {
	flex: 1;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.treaty-cut {
	width: 2rpx;
	height: 40rpx;
	background-color: #B4B1B4;
}

.bottom {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #FFF;
}

.bottom button {
	width: calc(100% - 60rpx);
	height: 100rpx;
	margin: 37rpx auto;
	background:#E6D5A3;
	border-radius: 10rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #706239;
	display: flex;
	align-items: center;
	justify-content: center;
}

</style>

<template>
	<view class="root">

		<view class="top">
			<nav-bar
				title="我的权益"
				background-color="transparent"
				color="#FFF"
				@on-back="$navigateBack()"
			></nav-bar>

			<view
				class="top-content"
				:style="{backgroundImage: 'url(/static/my-equity/top_bg.png)'}"
			>

				<view class="top-content-userinfo">
					<image class="top-content-avatar"></image>

					<view class="top-content-center">
						<view class="top-content-nickname">御剑飞</view>

						<view class="top-content-record">续费与开通记录</view>
					</view>

					<view class="top-content-icon">
						<view class="top-content-icon-item" style="background: #F24244; margin-left: 0rpx"><image src="/static/my-equity/1.png" style="width: 32rpx; height: 28rpx;"></image></view>
						<view class="top-content-icon-item" style="background: #515259;"><image src="/static/my-equity/2.png" style="width: 33rpx; height: 28rpx;"></image></view>
						<view class="top-content-icon-item" style="background: #53FF77;"><image src="/static/my-equity/3.png" style="width: 31rpx; height: 31rpx;"></image></view>
					</view>
				</view>

				<view class="top-content-button">
					<button class="top-face" @click="onClickFace">
						<image class="top-face-icon" src="/static/my-equity/4.png"></image>
						<text>采集人脸</text>
					</button>

					<button class="top-renew">立即续费</button>
				</view>

			</view>
		</view>

		<view class="card">
			<view class="card-item">
				<view class="card-item-left">
					<view class="card-item-title">UME影城观影卡</view>
					<view class="card-item-desc">2020/12/02 到期</view>
				</view>
				<arrow-right-red class="card-item-arrow"></arrow-right-red>
			</view>

			<view class="card-item">
				<view class="card-item-left">
					<view class="card-item-title">开通金逸影城权益</view>
					<view class="card-item-desc">享全年无限次观影</view>
				</view>
				<arrow-right-red class="card-item-arrow"></arrow-right-red>
			</view>
		</view>

		<view class="cell">
			<view class="cell-icon"><image src="/static/my-equity/exchange.png" mode="widthFix" style="width: 39rpx"></image></view>
			<view class="cell-value">实体卡/兑换码兑换</view>
			<view class="cell-arrow"><image src="/static/my-equity/arrow-right.png" mode="widthFix" style="width: 16rpx"></image></view>
		</view>
		<view class="cell">
			<view class="cell-icon"><image src="/static/my-equity/problem.png" mode="widthFix" style="width: 39rpx"></image></view>
			<view class="cell-value">常见问题</view>
			<view class="cell-arrow"><image src="/static/my-equity/arrow-right.png" mode="widthFix" style="width: 16rpx"></image></view>
		</view>
		<view class="cell">
			<view class="cell-icon"><image src="/static/my-equity/customer_service.png" mode="widthFix" style="width: 39rpx"></image></view>
			<view class="cell-value">联系客服</view>
			<view class="cell-arrow"><image src="/static/my-equity/arrow-right.png" mode="widthFix" style="width: 16rpx"></image></view>
		</view>

		<view class="treaty">
			<button class="treaty-item">会员服务协议</button>
			<view class="treaty-cut"></view>
			<button class="treaty-item">隐私条款</button>
		</view>

		<view class="bottom">
			<button>立即续费</button>
			<apple-sliver></apple-sliver>
		</view>

	</view>
</template>

<script>
import NavBar from "../../../components/nav-bar";
import ArrowRightRed from "../../../components/arrow-right-red";

export default {

	components: {
		NavBar,
		ArrowRightRed,
	},

	methods: {

		onClickFace() {
			uni.navigateTo({url: "/pages/face/face"});
		},

	}
}
</script>